<template>
  <div class="com-box">
    <div class="leave-header flex space-between">
      <div class="leave-left flex align-center">
        <el-icon class="icon" size="20">
          <WarningFilled />
        </el-icon>
        出院评估
      </div>
      <div class="leave-right flex space-between align-center">
        <div>评估人：张小云</div>
        <div class="leave-time">评估时间：
          <span>2023-02-12 12：30</span>
        </div>
      </div>
    </div>

    <div class="leave-table">
      <el-table :data="state.tableData.data" border style="width: 100%" stripe>
        <el-table-column prop="title" label="评估项" width="150" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="评估标准" align="center">
          <template #default="scope">
            <el-radio-group v-if="scope.row.title == '血压与脉搏'" v-model="scope.row.score">
              <el-radio :label="2">
                <el-tag type="success" size="small" effect="light">2分</el-tag>
                大于术前基准20%以内
              </el-radio>
              <el-radio :label="1">
                <el-tag size="small" effect="light">1分</el-tag>
                大于术前基准20%-40%
              </el-radio>
              <el-radio :label="0">
                <el-tag type="danger" size="small" effect="light">0分</el-tag>
                大于术前基准40%
              </el-radio>
            </el-radio-group>
            <el-radio-group v-if="scope.row.title == '活动能力'" v-model="scope.row.score">
              <el-radio :label="2">
                <el-tag type="success" size="small" effect="light">2分</el-tag>
                步态平稳与术前接近
              </el-radio>
              <el-radio :label="1">
                <el-tag size="small" effect="light">1分</el-tag>
                需要帮助
              </el-radio>
              <el-radio :label="0">
                <el-tag type="danger" size="small" effect="light">0分</el-tag>
                不能走动
              </el-radio>
            </el-radio-group>
            <el-radio-group v-if="scope.row.title == '恶心呕吐'" v-model="scope.row.score">
              <el-radio :label="2">
                <el-tag type="success" size="small" effect="light">2分</el-tag>
                轻度，口服药可以控制
              </el-radio>
              <el-radio :label="1">
                <el-tag size="small" effect="light">1分</el-tag>
                中度，注射药物可以控制
              </el-radio>
              <el-radio :label="0">
                <el-tag type="danger" size="small" effect="light">0分</el-tag>
                重度，需反复注射药物
              </el-radio>
            </el-radio-group>
            <el-radio-group v-if="scope.row.title == '出血'" v-model="scope.row.score">
              <el-radio :label="2">
                <el-tag type="success" size="small" effect="light">2分</el-tag>
                轻度，无需换药
              </el-radio>
              <el-radio :label="1">
                <el-tag size="small" effect="light">1分</el-tag>
                中度，需换药2 - 3次
              </el-radio>
              <el-radio :label="0">
                <el-tag type="danger" size="small" effect="light">0分</el-tag>
                重度，需换药2次以上
              </el-radio>
            </el-radio-group>
            <el-radio-group v-if="scope.row.title == '疼痛'" v-model="scope.row.score">
              <el-radio :label="2">
                <el-tag type="success" size="small" effect="light">2分</el-tag>
                轻度，口服药可以缓解
              </el-radio>
              <el-radio :label="1">
                <el-tag size="small" effect="light">1分</el-tag>
                中度，注射药物可以缓解
              </el-radio>
              <el-radio :label="0">
                <el-tag type="danger" size="small" effect="light">0分</el-tag>
                重度，需反复注射药物
              </el-radio>
            </el-radio-group>
            <el-radio-group v-if="scope.row.title == '总评分'" v-model="state.isPass" disabled>
              <el-radio :label="true">
                通过
              </el-radio>
              <el-radio :label="false">
                不通过
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="得分" width="150" align="center">
          <template #default="scope">
            <div v-if="scope.row.title == '总评分'" class="score-color" :class="totalScore >= 9 ? '' : 'danger'">
              {{ totalScore }}
            </div>
            <div v-else>
              {{ scope.row.score }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="tips">
      评分在≥9分以上，有成年家属陪同即可出院，痴气修补术需等患者可自主排小便方可出院。
    </div>

    <div class="nurse-sign flex justify-end">
      护士签名：
    </div>
  </div>
</template>

<script setup name="leaveAssess">
import { WarningFilled } from '@element-plus/icons-vue'

const props = defineProps({
  datas: {
    type: Object,
    default: () => { },
  },
});

const state = reactive({
  tableData: {
    data: [
      {
        title: '血压与脉搏',
        score: 2
      },
      {
        title: '活动能力',
        score: 2
      },
      {
        title: '恶心呕吐',
        score: 2
      },
      {
        title: '出血',
        score: 2
      },
      {
        title: '疼痛',
        score: 2
      },
      {
        title: '总评分',
      }

    ]

  },
  isPass: true
})


// 页面加载时
onMounted(() => {
  console.log(props.datas)
});

const totalScore = computed(() => {
  const scoreList = []
  state.tableData.data.forEach(item => {
    if (item.score) {
      scoreList.push(item.score)
    }
  })
  const total = scoreList.reduce((sum, value) => {
    return sum + value
  }, 0)
  return total
});

watch(totalScore, (val) => {
  if (val >= 9) {
    state.isPass = true
  } else {
    state.isPass = false
  }
});




</script>

<style lang="scss" scoped>

.el-radio {
  width: 200px !important;
}
.com-box{
  min-height: 620px;
}
.leave-header {
  border-bottom: 1px solid rgba(232, 232, 232, 1);
  padding-bottom: 10px;

  .leave-left {
    color: #3081F4;
    font-size: 16px;

    .icon {
      margin-right: 5px;
    }
  }

  .leave-right {
    color: #999;

    span {
      color: #333;
    }

    .leave-time {
      margin-left: 20px;
    }
  }




}

.score-color {
  color: #81B337;

  &.danger {
    color: red;
  }
}

.tips {
  color: #999;
  margin: 20px 0;
}

.nurse-sign {
  color: #333;
}
</style>
